<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/flex.css">
</head>
<body>

<!--flex-direction设置主轴方向------------------->
<div class="flex-direction">
    <p>flex-direction: row</p>
    <div class="box row">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="flex-direction">
    <p>flex-direction: row-reverse</p>
    <div class="box row-reverse">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="flex-direction">
    <p>flex-direction: column</p>
    <div class="box column">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="flex-direction">
    <p>flex-direction: column-reverse</p>
    <div class="box column-reverse">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<!--align-items设置副方向子元素（共同）位置-------->
<div class="align-items">
    <p>align-items:flex-start</p>
    <div class="box flex-start">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="align-items">
    <p>align-items:center</p>
    <div class="box center">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="align-items">
    <p>align-items:flex-end</p>
    <div class="box flex-end">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="align-items">
    <p>align-items:stretch</p>
    <div class="box stretch">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

<!--justify-content设置主方向子元素的排布---------->
<div class="justify-content">
    <p>justify-content:flex-start</p>
    <div class="box flex-start">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="justify-content">
    <p>justify-content:center</p>
    <div class="box center">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="justify-content">
    <p>justify-content:flex-end</p>
    <div class="box flex-end">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="justify-content">
    <p>justify-content:space-between</p>
    <div class="box space-between">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="justify-content">
    <p>justify-content:space-around</p>
    <div class="box space-around">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>
<div class="justify-content">
    <p>justify-content:space-evenly</p>
    <div class="box space-evenly">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

<!--align-self设置子元素单独的副轴位置------------>
<div class="align-self">
    <p>align-self</p>
    <div class="box">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
    </div>
</div>

<!--flex-grow设置子元素所分配到的剩余空间占比------>
<div class="flex-grow">
    <p>flex-grow</p>
    <div class="box">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

<!--flex-shrink设置子元素所承担的收缩空间占比------>
<div class="flex-shrink">
    <p>flex-shrink</p>
    <div class="box">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

<!--flex设置子元素占所有空间的比例---------------->
<!--相当于shrink和grow的结合--------------------->
<div class="flex">
    <p>flex</p>
    <div class="box">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

<!--实现斜向排列--------------------------------->
<div class="xie">
    <p>斜向排列（三个）</p>
    <div class="box">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

</body>
</html>